<template>
  <el-form>
    <el-col
      :span="22"
      class="el-col-offset-2"
    ><el-upload
      :action="uploadPath"
      list-type="picture-card"
      class="ele-col-upload"
      accept=".jpg, .png"
      :data="{path:path,fileType: 10}"
      :before-upload="beforeUpload"
      :on-success="uploadSuccess"
      :limit="limitCount"
      :on-change="isOverLimit"
      :on-remove="isOverLimit"
      :class="{hide:hideUpload}"
    >
      <img
        v-if="tableUploadImg"
        style="width: 100%"
        class="el-upload-list__item-thumbnail"
        :src="baseUrl+tableUploadImg"
        alt=""
      >
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload></el-col>
  </el-form>
</template>

<script>
import { uploadPath } from '@/api/upload'

export default {
  name: 'ServiceOriginalValue',
  props: {
    index: {
      type: Number,
      required: true
    },
    tableImg: {
      type: String,
      required: false,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadPath,
      path: '/image/',
      tableUploadImg: '',
      limitCount: 1,
      hideUpload: false,
      props: { multiple: true }
    }
  },
  mounted() {
    if (this.tableImg) {
      this.tableUploadImg = this.tableImg
    }
  },
  methods: {
    isOverLimit(file, fileList) {
      console.log(file)
      this.hideUpload = fileList.length >= this.limitCount
      console.log(this.hideUpload)
    },
    beforeUpload(file) {
      const vm = this
      vm.$emit('beforeImgUpload', file)
    },
    uploadSuccess(response) {
      const vm = this
      vm.tableUploadImg = response.data.relativePath
    },
    getData() {
      const vm = this
      return vm.tableUploadImg
    }
  }
}
</script>

<style scoped>
::v-deep .hide .el-upload--picture-card {
  display: none !important;
}
</style>
